<template>
    <div class="fixed-box">
        <div class="lay-side">
            <div class="lay-item" @click="handlerFn">
                <div class="icon-img"><i class="icon-ask"></i></div>
                <p>立即咨询</p>
            </div>

            <div class="lay-item lay-top" ref="btn" @click="goTop">
                <img src="../../static/img/sq/go_top.jpg" alt="">
            </div>
            <!-- <div class="lay-item" @click="handlerFn('AP')">
                <div class="icon-img"><i class="icon-appointment"></i></div>
                <p>立即预约</p>
            </div> -->

            <!-- <div class="lay-item" @click="handlerFn('G')">
                <div class="icon-img"><i class="icon-guide"></i></div>
                <p>买家指南</p>
            </div> -->
        </div>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from 'nuxt-property-decorator'
// import hall from '../../../components/hall/hall.vue'
import {open53Server} from '~/method'
@Component({
    components: {
    }
})
export default class FixedPage extends Vue {
    isTop:boolean = false
    open53Server () {
        open53Server()
    }
    goTop () {
        document.documentElement.scrollTop = 0
    }
    handlerFn () {
        open53Server()
    }
    needScroll () {
        const clientHeight = document.documentElement.clientHeight
        const obtn = this.$refs.btn
        window.onscroll = function () {
            const osTop = document.documentElement.scrollTop || document.body.scrollTop
            if (osTop >= clientHeight) {
                (obtn as any).style.display = 'block'
            } else {
                (obtn as any).style.display = 'none'
            }
            // if (!this.isTop) {
            // clearInterval(timer)
            // }
            // this.isTop = false
        }
    }
    mounted () {
        this.needScroll()
    }
}
</script>

<style lang="scss">
    .dia-select-popper{
        z-index: 10000000!important;
    }
.fixed-box{
    .el-select-dropdown{
        z-index: 10000!important;
    }
    .my-dia-class{
        .el-dialog__header{
            background: orange;
            .el-dialog__title,.el-dialog__headerbtn .el-dialog__close{
                color: white;
            }
        }
        .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{
            content:''
        }
        .el-input__inner{
            padding-left: 35px!important;
        }
        .el-dialog__body{
            .el-form-item__label{
                position: relative;
                top: 40px;
                z-index: 10;
            }
            .el-form-item__error{
                top:82px;
            }
            .el-form-item__content{
                height: 40px;
                .el-input{
                    z-index: 9;
                }
            }
            .ho-form-item{
                text-align: left;
                .el-form-item{
                    display: inline-block;
                    width: 45%;
                }
                .el-form-item+.el-form-item{
                    margin-left: 20px;
                }
            }
            .textarea{
                margin-top: 30px;
            }
            .flow-btn{
                height: 40px;
                line-height: 40px;
                display: block;
                margin-top: 70px;
                background: orange;
                color: white;
                cursor: pointer;
            }
        }
    }
    .yuyue{
        .flow-box{
            padding: 0 10px;
            text-align: center;
            h5{
                margin: 0;
                font-size: 24px;
                //padding-top: 46px;
                font-weight: normal;
                margin-bottom: 10px;
            }
            p{
                margin: 0;
                span{
                    color: green;
                    margin: 0 6px;
                    font-size: $mid-font-size;
                }
            }
        }
    }

    .lay-side{
        .lay-top{
            display: none;
        }
        .lay-item{
            cursor: pointer;
            .icon-img{
                padding-top: 5px;
                width: 40px;
                height: 35px;
                background: #11a9e8;
                i{
                    margin: 0 auto;
                    display: block;
                    width: 24px;
                    height: 24px;
                }
                .icon-ask{
                    background: url("../../static/img/sq/postion_icon.png") no-repeat 0px -48px;
                }
                .icon-appointment{
                    background: url("../../static/img/sq/postion_icon.png") no-repeat 0 0;
                }
                .icon-guide{
                    margin-left: 10px;
                    background: url("../../static/img/sq/postion_icon.png") no-repeat 0px -91px;
                }
            }
            p{
                padding: 5px 7px;
                width: 40px;
                height: 85px;
                text-align: center;
                background: #fcfcfc;
                font-size: 14px;
                color: #666a75;
                display: none;
            }
            &:hover p{
                display: block;
            }
        }
    }
}
</style>
